<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout布局</title>
    <link rel="stylesheet" href="./element_ui/index.css">
    <script src="vue.js"></script>
    <script src="./element_ui/index.js"></script>
    <style>
        .l_left {
            height: 600px;
            background-color: seagreen;
        }
        
        #app {
            height: 600px;
            background-color: rgb(194, 224, 207);
        }
        
        .i_right_r {
            height: 160px;
            background-color: rgb(221, 177, 136);
        }
        
        .i_right_v {
            height: 160px;
            background-color: rgb(102, 96, 189);
        }
        
        .o_right {
            margin-top: 22px;
        }
    </style>
</head>

<body>
    <div id="app">

        <el-row :gutter="20">

            <el-col :span="4">
                <div class="l_left"></div>
            </el-col>

            <el-col :span="20">

                <!-- 第一排 -->
                <el-row class="o_right" :gutter="20">
                    <el-col :span="9">
                        <div class="i_right_r"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="i_right_v"></div>
                    </el-col>
                    <el-col :span="9">
                        <div class="i_right_r"></div>
                    </el-col>
                </el-row>
                <!-- 第二排 -->
                <el-row class="o_right" :gutter="20">
                    <el-col :span="18">
                        <div class="i_right_v"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="i_right_r"></div>
                    </el-col>
                </el-row>
                <!-- 第三排 -->
                <el-row class="o_right" :gutter="20">
                    <el-col :span="12">
                        <div class="i_right_v"></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="i_right_r"></div>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>
    </div>



    <script>
        // Vue.use(ElementUI);

        var app = new Vue({
            el: '#app',
            data: {}
        });
    </script>
</body>

</html>